<template>
	<view class="content">
		<!-- 用户头像header -->
		<view class='member-top'>
			<image class='bg-img' src="/static/member-bg.png"></image>
			<view class='member-top-c'>
				<view>
					<template v-if="userInfo">
						<image class='user-head-img' mode="aspectFill" :src='userInfo.avatar' @click="editUserInfo('/pagesA/mine/userInfo')"></image>
						<view class="user-bar">
							<view class='user-name'>{{userInfo.username}}</view>
							<view :class="recognizeStatus === 0 ? 'wrz' : 'yrz'" class="user-recognize">
								<text v-if="recognizeStatus === 0" @click="authenticationShow = true">
									未认证？点击认证</text>
								<text v-if="recognizeStatus === 1">认证中</text>
								<text v-if="recognizeStatus === 2">已认证</text>
								<text v-if="recognizeStatus === 3">认证不通过</text>
							</view>
						</view>
						<view class="user-info">
							<view class='user-company'>{{userInfo.company}}</view>
						</view>
					</template>
					<template v-else>
						<view>
							<image class='user-head-img' mode="aspectFill" src="/static/login.png"></image>
						</view>
						<view>
							<button class="login-btn" hover-class="btn-hover" @click="goLogin()">授权登录</button>
						</view>
					</template>
				</view>
			</view>
		</view>
		<!-- 用户头像header end -->
		<view class="center-warp">
			<view class="centerList" @click="uploadRecord('/pagesA/mine/uploadrecord')">
				<view class="left">
					<image src="/static/icon/upload.png"></image>
				</view>
				<view class="mid">上报数据</view>
			</view>
			<view class="centerList" @click="uploadRecordLog('/pagesA/mine/uploadrecordlog')">
				<view class="left">
					<image src="/static/icon/record.png"></image>
				</view>
				<view class="mid">上报记录</view>
			</view>
			<view v-if="userInfo">
				<view class="centerList">
					<view class="left">
						<image src="/static/logout.png"></image>
					</view>
					<view class="mid" @click="loginOutShow = true">退出登录</view>
				</view>
			</view>
		</view>

		<view>
			<u-modal :show="loginOutShow" 
					content="是否退出登录" 
					:show-cancel-button="true" 
					:closeOnClickOverlay="true" 
					@cancel="loginOutShow = false" 
					@confirm="loginOut"></u-modal>
			<u-modal :show="authenticationShow" 
					title="未认证，马上申请认证?"
					content="温馨提示: 认证前请点击头像实名个人信息, 便于管理员审核, 否则可能认证不通过"
					:show-cancel-button="true" 
					:closeOnClickOverlay="true" 
					@cancel="authenticationShow = false" 
					@confirm="authenticationBtn"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginOutShow: false,
				authenticationShow: false,
				recognizeStatus: 0,
				userInfo: {}
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('user_info')
			this.recognizeStatus = uni.getStorageSync('recognizeStatus')
		},
		methods: {
			
			editUserInfo(url){
				uni.navigateTo({
					url: url
				})
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/sys/login/index'
				})
			},
			isRecognizeStatus(url) {
				if (this.recognizeStatus === 0) {
					this.authenticationShow = true
				} else if (this.recognizeStatus === 1) {
					uni.showToast({
						icon: 'none',
						title: '认证审核中',
						duration: 1000
					});
				} else if (this.recognizeStatus === 2) {
					uni.navigateTo({
						url: url
					})
				} else if (this.recognizeStatus === 3) {
					uni.showToast({
						icon: 'none',
						title: '认证不通过',
						duration: 1000
					});
				}
			},
			uploadRecord(url){
				this.isRecognizeStatus(url)
			},
			uploadRecordLog(url){
				this.isRecognizeStatus(url)
			},
			loginOut() {
				this.$u.api.mine.logout().then((res) => {
					//清空存储信息
					uni.clearStorageSync('token')
					uni.clearStorageSync('user_info')
					this.$u.toast("退出成功");
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/tabBar/mine/index", 
						});
					}, 500);
				});
			},
			authenticationBtn() {
				this.$u.api.mine.identifyApply().then((res) => {
					if(res.code === 0){
						this.authenticationShow = false;
						this.recognizeStatus = 1;
						uni.setStorageSync('recognizeStatus', 1)
						this.$u.toast("申请成功，请等待审核")
					}
					if(res.code === 1){
						this.$u.toast(res.msg);
						this.authenticationShow = false
					}
				}).catch(e => {
					this.$u.toast("系统错误，请联系管理员");
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.member-top {
		position: relative;
		width: 100%;
		height: 340upx;
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	.member-top-c {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
		padding-top: 20px;
	}

	.user-head-img {
		display: block;
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
		overflow: hidden;
		background-color: rgba(255, 255, 255, 0.7);
		margin: 0 auto 16upx;
	}
	
	.user-bar {
		position: relative;
		display: flex;
		align-items: center;
		margin-bottom: 16upx;
	}

	.user-recognize {
		position: relative;
		margin-left: 10upx;
		font-size: 15upx;
		color: #fff;
		padding: 2px 5px;
		border-radius: 4px;
		background: #666;
	}
	
	.yrz {
		background: #009900;
	}
	
	.wrz {
		background: #f9593b;
	}

	.user-info {
		text-align: center;
	}

	.user-name {
		font-size: 25upx;
		color: #fff;
	}

	.user-company {
		color: #FFF;
		font-size: 25rpx;
	}

	.login-btn {
		color: #fff;
		width: 180upx;
		height: 50upx;
		line-height: 50upx;
		border-radius: 25upx;
		background: #ff7159;
		font-size: 12px;
	}

	.center-warp {
		margin-top: 40rpx;
	}

	.centerList {
		box-sizing: border-box;
		width: 100%;
		height: 110rpx;
		display: table;
		background: #fff;
		border-bottom: 1rpx solid #D8D8D8;
		padding: 0 30rpx;
	}

	.centerList .left {
		width: 40rpx;
		display: table-cell;
		vertical-align: middle;
	}

	.centerList .left image {
		width: 40rpx;
		height: 40rpx;
	}

	.centerList .mid {
		padding: 0 20rpx;
		display: table-cell;
		vertical-align: middle;
	}

	.centerList .right {
		width: 40rpx;
		text-align: right;
		display: table-cell;
		vertical-align: middle;
	}

	.centerList .right image {
		width: 14rpx;
		height: 25rpx;
	}
</style>
